<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>template</title>
</head>
<body>
<template id="my-paragraph">
  <style>
    p {
      color: white;
      background-color: #666;
      padding: 5px;
    }
  </style>
  <slot name="my-text">My default text</slot>
  <slot name="my-list">My default list</slot>
</template>
<my-paragraph>
  <span slot="my-text">Let's have some different text!</span>
  <ul slot="my-list">
    <li>Let's have some different text!</li>
    <li>In a list!</li>
  </ul>
</my-paragraph>
</body>
<script>
  customElements.define('my-paragraph',
    class extends HTMLElement {
      constructor() {
        super();
        let template = document.getElementById('my-paragraph');
        let templateContent = template.content;

        const shadowRoot = this.attachShadow({mode: 'open'})
          .appendChild(templateContent.cloneNode(true));
      }
    })
</script>
</html>
